const tmplBase=`<div class="{{class}}">
                    <div data-key="front"></div>
                    <table data-key="data"></table>
                    <div data-key="back"></div>
                 </div>`;

const tmplTr ='<tr>{{tr}}</tr>';
const tmplTd = '<td>{{td}}</td>';
const tmplSpan ='<span>{{data}}</span>';

export default class MatrixView{
    constructor(cfg) {
        this.$root = $('#' + cfg.el);
        this.$root.html(tmplBase.replace('{{class}}', !cfg.style ? 'matrix' : cfg.style));
        this.$data =  this.$root.find('[data-key="data"]');
        this.render(cfg.data);
    };

    render(data){
        let tds;
        let trs='';
        for(let ds of data){
            tds ='';
            for(let d of ds)
                tds += tmplTd.replace('{{td}}',tmplSpan.replace('{{data}}',d));
            trs += tmplTr('{{tr}}',tds);
        }
        this.$data.html(trs);
    }

}
